<script lang="ts" setup>
import router from '@/router';
import { useDynamicsStore } from '@/stores/dynamicsData.ts';
import { HomeOutlined } from '@ant-design/icons-vue';

// 面包屑
const breadcrumb = [
  { label: '首页', path: '/' },
  { label: '行业动态', path: '' },
];

// Pinia
const dynamicsStore = useDynamicsStore();

const updateDynamicsSets = () => {
  dynamicsStore.updateDynamicsSets();
};
updateDynamicsSets();

const searchTerm = ref<string>('');

const onSearch = () => {
  dynamicsStore.updateDynamicsSets(searchTerm.value);
};

// 返回上一页
const goBack = () => {
  router.back();
};

// 跳转到详细页面
const goToDetailPage = (id: string) => {
  router.push({ name: 'HYDetailPage', params: { id } });
};
</script>

<template>
  <div class="mb-12 mt-5 flex flex-col">
    <!-- 表头工具栏 -->
    <div class="flex h-14 items-center justify-between gap-2 bg-white px-6">
      <div class="flex grow-[1] items-center gap-2">
        <HomeOutlined />
        <span>当前位置:</span>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index" :to="item.path">
            {{ item.label }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="flex items-center gap-2">
        <a-input-search
          v-model:value="searchTerm"
          style="width: 300px"
          placeholder="输入关键词搜索"
          enter-button="搜索"
          size="middle"
          @search="onSearch"
          @clear="updateDynamicsSets()"
          allow-clear
        />
        <span class="ml-4 cursor-pointer" @click="goBack">【返回上一页】</span>
      </div>
    </div>

    <!-- 表格 -->
    <div class="table-shadow mb-4 mt-4 min-h-[600px] bg-white p-6">
      <template v-if="dynamicsStore.getDynamicsSets.length === 0">
        <!-- 空数据占位 -->
        <div class="flex justify-center">
          <el-empty class="m-auto" description="暂无数据" />
        </div>
      </template>

      <template v-else>
        <a-list
          v-loading="dynamicsStore.getDynamicsLoading"
          :data-source="dynamicsStore.getDynamicsSets"
          :loading="dynamicsStore.getDynamicsLoading"
          :pagination="dynamicsStore.pagination"
        >
          <template #renderItem="{ item }">
            <a-list-item class="cursor-pointer">
              <span class="text-base hover:text-blue-500" @click="goToDetailPage(item.id)">
                {{ item.title }}
              </span>
              <template #actions>
                <span>{{ item.time }}</span>
              </template>
            </a-list-item>
          </template>

          <!-- 头部定位 -->
          <template #header>
            <div class="absolute mt-[-30px] border-b border-[#cbcbcb] p-1 text-lg text-[#103588]">
              <strong>最新资讯</strong>
            </div>
          </template>
        </a-list>
      </template>
    </div>
  </div>
</template>

<style scoped>
.table-shadow {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
</style>
